import React, { useState } from 'react';
import { useInventory } from '../contexts/inventoryContext';
import { motion, AnimatePresence } from 'framer-motion';
import { ProductCategory } from '../types/inventory';

interface RestockModalProps {
  isOpen: boolean;
  onClose: () => void;
  category: ProductCategory;
}

export const RestockModal: React.FC<RestockModalProps> = ({ isOpen, onClose, category }) => {
  const { updateStock } = useInventory();
  const [restockAmount, setRestockAmount] = useState('');

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    
    if (!restockAmount) {
      alert('请输入进货数量');
      return;
    }
    
    const amount = parseInt(restockAmount, 10);
    
    if (isNaN(amount) || amount <= 0) {
      alert('请输入有效的进货数量');
      return;
    }
    
    updateStock(category.id, amount);
    setRestockAmount('');
    onClose();
  };

  const handleOverlayClick = (e: React.MouseEvent) => {
    if (e.target === e.currentTarget) {
      onClose();
    }
  };

  return (
    <AnimatePresence>
      {isOpen && (
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
          className="fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-50 backdrop-blur-sm"
          onClick={handleOverlayClick}
        >
          <motion.div
            initial={{ scale: 0.9, y: 20 }}
            animate={{ scale: 1, y: 0 }}
            exit={{ scale: 0.9, y: 20 }}
            className="bg-white dark:bg-gray-800 rounded-xl p-6 w-full max-w-md shadow-2xl border border-gray-100 dark:border-gray-700"
          >
            <h2 className="text-2xl font-bold mb-2 text-gray-800 dark:text-white">进货 - {category.name}</h2>
            <p className="text-gray-500 dark:text-gray-400 mb-4">当前库存: {category.stock}</p>
            
            <form onSubmit={handleSubmit} className="space-y-4">
              <div>
                <label htmlFor="restockAmount" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                  进货数量
                </label>
                <input
                  type="number"
                  id="restockAmount"
                  value={restockAmount}
                  onChange={(e) => {
                    // 只允许输入数字和空字符串
                    if (e.target.value === '' || /^\d+$/.test(e.target.value)) {
                      setRestockAmount(e.target.value);
                    }
                  }}
                  placeholder="请输入进货数量"
                  className="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
                  autoFocus
                  min="1"
                />
              </div>
              
              <div className="flex space-x-3 pt-2">
                <button
                  type="button"
                  onClick={onClose}
                  className="flex-1 px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
                >
                  取消
                </button>
                <button
                  type="submit"
                  className="flex-1 px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors"
                >
                  确认进货
                </button>
              </div>
            </form>
          </motion.div>
        </motion.div>
      )}
    </AnimatePresence>
  );
};